window.onload = function () {
      initSltCity();
      document.getElementById('sltCity').onchange = setAreas;
}

function initSltCity() {
    var sltCity = document.getElementById('sltCity');
    sltCity.innerHTML = "";
    for (var key in cities) {
        var opt = document.createElement('option');
        opt.value = cities[key].id;
        opt.innerText = cities[key].name;
        sltCity.appendChild(opt)
    }

}

function setAreas() {

    var sltArea = document.getElementById('sltArea');
    sltArea.innerHTML = "";
    var sltCity = document.getElementById('sltCity');
    var cityId = sltCity.selectedOptions[0].value;

    var current = cities.find(function (item) {
        return item.id == cityId;
    })

    var areas = current.areas;

    for (var key in areas) {

        var opt = document.createElement('option');
        opt.value = areas[key].id;
        opt.innerText = areas[key].name;

        sltArea.appendChild(opt)
    }

}